<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>切换动画</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../test.css">
<link rel="stylesheet" href="animate.css">
<style>
.custom.in {
	-webkit-animation: fadein .35s .25s both;
	animation: fadein .35s .25s both;
}
.custom.out {
	-webkit-animation-name: fadeout;
	animation-name: fadeout;
}
.page { 
    background: linear-gradient(#f0f3f9, #ffffe0);
}
</style>
</head>

<body class="turn-flip">
<div id="pageHome" class="page out" data-form="custom">
    <ul>
        <li><a href="#page1">页面1 - fade - data-form="fade"</a></li>
        <li><a href="#page2">页面2 - flip</a></li>
        <li><a href="#page3">页面3 - turn</a></li>
        <li><a href="#page4">页面4 - flow</a></li>
        <li><a href="#page5">页面5 - slideup</a></li>
        <li><a href="#page6">页面6 - slidedown</a></li>
        <li><a href="#page7">页面7 - pop</a></li>
    </ul>
    <ul>
        <li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
    </ul>
</div>
<div id="page1" class="page out" data-form="fade">
    <a href="#pageHome" data-rel="back">&laquo;返回1</a>
    <p>淡入淡出效果</p>
</div>
<div id="page2" class="page out" data-form="flip">
    <a href="#pageHome" data-rel="back">&laquo;返回2</a>
    <p>弹入弹出效果</p>
</div>
<div id="page3" class="page out" data-form="turn">
    <a href="#pageHome" data-rel="back">&laquo;返回3</a>
    <p>翻页效果</p>
</div>
<div id="page4" class="page out" data-form="flow">
    <a href="#pageHome" data-rel="back">&laquo;返回4</a>
    <p>流入流出效果</p>
</div>
<div id="page5" class="page out" data-form="slideup">
    <a href="#pageHome" data-rel="back">&laquo;返回5</a>
    <p>上移淡出效果</p>
</div>
<div id="page6" class="page out" data-form="slidedown">
    <a href="#pageHome" data-rel="back">&laquo;返回6</a>
    <p>落下淡出效果</p>
</div>
<div id="page7" class="page out" data-form="pop">
    <a href="#pageHome" data-rel="back">&laquo;返回7</a>
    <p>缩放效果</p>
</div>

<script src="../../src/mobilebone.js"></script>
</body>
</html>
